<template>
  <section>
    <edit-table
      ref="table"
      :table-column="tableColumn"
      is-index
      :api-path="apiPath">
      <el-table-column slot="operate" label="操作" width="230" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            class="textButton"
            icon="el-icon-edit-outline"
            @click="openDialog('edit',scope.row)"
          ></el-button>
          <el-button
            type="text"
            class="textButton"
            style="color:red;"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </edit-table>
    <edit-dialog
      :visible-flag='dialogData.visibleFlag'
      :data="dialogData.editData"
      :api-path="apiPath"
      @close-dialog="closeDialog"
      @submitForm="submitForm">
      <edit-form
        slot="dialog-section"
        :data="dialogData.editData"/>
    </edit-dialog>
  </section>
</template>

<script>
import request from '@/network/request'
import editTable from '@/components/editTable'
import editDialog from '@/components/editDialog'
import editForm from './editForm'
import { tableColumn, apiPath } from './data.enum.js'
export default {
  components: {
    editTable,
    editDialog,
    editForm
  },
  beforeMount () {
    this.tableColumn = tableColumn
  },
  data () {
    return {
      apiPath: apiPath,
      dialogData: {
        visibleFlag: false,
        dialogTitle: '新增',
        formType: 'add',
        editData: {}
      }
    }
  },
  methods: {
    openDialog (formType, editData = {}) {
      this.dialogData = {
        visibleFlag: true,
        formType,
        editData,
        dialogTitle: formType === 'add' ? '新增' : '编辑'
      }
    },
    handleDelete (index, row) {
      this.$refs.table.handleDelete(index, row)
    },
    closeDialog () {
      this.$refs.table.getData()
      this.dialogData.visibleFlag = false
    },
    submitForm () {
      const data = this.dialogData.editData
      const params = {
        id: data.id,
        raw_material_1: data.rawMaterial1,
        peat_1: data.peat1,
        backfill_fertilizer_1: data.backfillFertilizer1,
        wood_matrix_1: data.woodMatrix1,
        output_1: data.output1,
        tontank_feed_2: data.tontankFeed2,
        disposal_kitchen_waste_2: data.disposalKitchenWaste2,
        peat_2: data.peat2,
        dried_kitchen_waste_2: data.driedKitchenWaste2,
        wood_matrix_2: data.woodMatrix2,
        discharge_ton_box_2: data.dischargeTonBox2,
        kitchen_waste_under_sieve_2: data.kitchenWasteUnderSieve2,
        tontank_feed_3: data.tontankFeed3,
        disposal_kitchen_waste_3: data.disposalKitchenWaste3,
        peat_3: data.peat3,
        dried_kitchen_waste_3: data.driedKitchenWaste3,
        wood_matrix_3: data.woodMatrix3,
        discharge_ton_box_3: data.dischargeTonBox3,
        kitchen_waste_under_sieve_3: data.kitchenWasteUnderSieve3,
        tontank_feed_4: data.tontankFeed4,
        disposal_kitchen_waste_4: data.disposalKitchenWaste4,
        peat_4: data.peat4,
        dried_kitchen_waste_4: data.driedKitchenWaste4,
        wood_matrix_4: data.woodMatrix4,
        discharge_ton_box_4: data.dischargeTonBox4,
        kitchen_waste_under_sieve_4: data.kitchenWasteUnderSieve4,
        factory: this.$store.getters.getFactory
      }
      if (data.remark !== null) {
        params.remark = data.remark
      } else {
        params.remark = ''
      }
      request({
        method: 'post',
        url: this.apiPath + '/update',
        params: params
      }).then((res) => {
        if (res.data.code === 200 && res.data.message === 'SUCCESS') {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
        } else if (res.data.message !== 'SUCCESS') {
          this.$message.error(res.data.message)
        } else if (res.data.code === 400) {
          this.$message.error(res.message)
        } else {
          this.$message.error('保存失败!')
        }
        this.closeDialog()
      })
    }
  }
}
</script>

<style scoped>
</style>
